<template>
    <el-card>
        <div slot="header">用户操作记录</div>
        <el-table :data="list" v-loading="loading.data">
            <el-table-column label="用户" prop="user.username" width="120px"/>
            <el-table-column label="操作项目" prop="value">
                <template slot-scope="scope">
                    <template v-if="scope.row.value.content">
                        {{scope.row.value.content}}
                    </template>
                    <template v-else>
                        {{scope.row.value}}
                    </template>
                    <template v-if="scope.row.value.hasOwnProperty('project')">
                        <el-button type="text"
                                   @click="$router.push('/project/'+scope.row.value.project.id)">
                            {{scope.row.value.project.name}}
                        </el-button>
                    </template>
                    <template v-if="scope.row.value.hasOwnProperty('anchor')">
                        <el-button type="text"
                                   @click="$router.push('/anchor/'+scope.row.value.anchor.id)">
                            {{scope.row.value.anchor.name}}
                        </el-button>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="时间" prop="created_at"/>
        </el-table>
        <br/>
        <el-button @click="clearEvent" :loading="loading.clearEvent" :disabled="total === 0">清空操作记录</el-button>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="$store.state.pageSize"
                :current-page.sync="page"
                @current-change="fetch"
                :total="total"
                class="inline-block"/>
    </el-card>
</template>

<script>
    export default {
        name: "event",
        data() {
            return {
                loading: {clear: false, data: true},
                page: 1,
                total: 0,
                list: []
            };
        },
        methods: {
            fetch() {
                this.loading.data = true;
                this.$http.get('/api/event', {params: {page: this.page}}).then(({data}) => {
                    this.loading.data = false;
                    this.total = data.total;
                    this.list = data.list;
                });
            },
            clearEvent() {
                this.$confirm('清空操作记录？')
                    .then(() => {
                        this.loading.clearEvent = true;
                        this.$http.get('/api/event/clear_event').then(res => {
                            this.loading.clearEvent = false;
                            this.list = [];
                            this.total = 0;
                            this.$message.success(res.data);
                            this.fetch();
                        });
                    })
                    .catch(() => {
                    });
            },
        },
        mounted() {
            this.fetch();
        }
    }
</script>

<style scoped>

</style>